<template>
    <div class="audioPage">
        <div class="audioPage-box">
            <div class="header">
                <div class="logo">
                    <img src="../../assets/images/logo酷玩.png" alt="" />
                </div>
                <div class="right-box">
                    <div
                        class="changBlack"
                        @click="themeBoxShow = !themeBoxShow"
                    >
                        <img
                            src="../../assets/images/主题背景.png"
                            alt=""
                            title="主题"
                        />
                    </div>
                    <!-- 主题背景模态框 -->
                    <transition
                        name="custom-classes-transition"
                        enter-active-class="animated bounceIn"
                        leave-active-class="animated bounceOut"
                    >
                        <div id="chooseTheme" v-show="themeBoxShow">
                            <ul>
                                <li @click="theme = 1">
                                    <div class="img-box">
                                        <img
                                            src="../../assets/images/泳池派对.png"
                                            alt=""
                                        />
                                    </div>
                                </li>
                                <li @click="theme = 2">
                                    <div class="img-box">
                                        <img
                                            src="../../assets/images/山林湖草.png"
                                            alt=""
                                        />
                                    </div>
                                </li>
                                <li @click="theme = 3">
                                    <div class="img-box">
                                        <img
                                            src="../../assets/images/林间小屋.png"
                                            alt=""
                                        />
                                    </div>
                                </li>
                                <li @click="theme = 4">
                                    <div class="img-box">
                                        <img
                                            src="../../assets/images/流星.png"
                                            alt=""
                                        />
                                    </div>
                                </li>
                                <li @click="theme = 5">
                                    <div class="img-box">
                                        <img
                                            src="../../assets/images/樱花.png"
                                            alt=""
                                        />
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </transition>
                    <div
                        class="changRevel"
                        @click="controlInterface = !controlInterface"
                    >
                        <div class="chenqing" v-if="controlInterface">
                            <img
                                src="../../assets/images/changeRevel.png"
                                alt=""
                            />
                        </div>
                        <div class="moren" v-else>
                            <img
                                src="../../assets/images/changeRevel2.png"
                                alt=""
                            />
                        </div>
                    </div>
                    <div class="inputSearch">
                        <searchModel></searchModel>
                    </div>
                    <div class="loginUser">
                        <headUserInfo></headUserInfo>
                    </div>
                </div>
            </div>
            <div class="mod-player">
                <div class="mod-player-inner">
                    <div class="songer-info">
                        <div class="img-box">
                            <img :src="currentMusic.img" alt="" />
                        </div>
                        <div class="singer-content-box">
                            <div class="song-name">
                                <p>{{ currentMusic.name }}</p>
                            </div>
                            <div class="singer-name">
                                <p>{{ currentMusic.artistName[0].name }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="song-info-lyric">
                    <div class="hidden-lyricBox">
                        <div class="lyric-info">
                            <div class="lineLyric" ref="scollLine">
                                <template v-for="item in currentMusic.lyric">
                                    <span
                                        :class="
                                            currentMusic.currentPlayTime >=
                                                item.time &&
                                            currentMusic.currentPlayTime <=
                                                item.endtime
                                                ? 'currentLine'
                                                : ''
                                        "
                                        >{{ item.lineLyric }}</span
                                    >
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="temp_list">
                    <div class="hidden-music-box">
                        <div class="box-list">
                            <ul>
                                <li
                                    v-for="(item, index) in tempMusicList"
                                    :class="
                                        item.id == currentMusic.id
                                            ? 'currentMusic'
                                            : ''
                                    "
                                >
                                    <template>
                                        <div class="listNumber">
                                            {{ index + 1 }}
                                        </div>
                                        <div
                                            class="hidden-play"
                                            @click="
                                                myListChangeCurrentMusic(item)
                                            "
                                        >
                                            <img
                                                src="../../assets/images/右三角实心.png"
                                                alt=""
                                            />
                                        </div>
                                    </template>

                                    <div class="item-name">
                                        <p>{{ item.name }}</p>
                                    </div>
                                    <div class="item-artists">
                                        <p>{{ item.artistName[0].name }}</p>
                                    </div>
                                    <div class="item-time">
                                        <p v-if="item.id != currentMusic.id">
                                            {{ formatTime(item.endtime) }}
                                        </p>
                                        <div class="img-box" v-else></div>
                                    </div>
                                    <div
                                        class="hidden-delete"
                                        @click="deleteMusic(item.id)"
                                    >
                                        <div class="img-box">
                                            <img
                                                src="../../assets/images/垃圾桶白色.png"
                                                alt=""
                                            />
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-playMusic-box">
                <div class="play-model">
                    <div class="previousMusic" @click="myNextSong(0)">
                        <img src="../../assets/images/上一首白色.png" alt="" />
                    </div>
                    <template>
                        <div class="playMusic" v-if="!currentMusic.play">
                            <img
                                src="../../assets/images/播放白色.png"
                                alt=""
                                @click="playSong()"
                            />
                        </div>
                        <div class="pauseMusci" v-else>
                            <img
                                src="../../assets/images/暂停白色.png"
                                alt=""
                                @click="pauseMusic()"
                            />
                        </div>
                    </template>
                    <div class="nextMusic" @click="myNextSong(1)">
                        <img src="../../assets/images/下一首白色.png" alt="" />
                    </div>
                </div>
                <div class="play-music" @mouseup="progressMouseUp($event)">
                    <div class="current-time">
                        {{
                            timeMinutes(currentMusic.currentPlayTime)
                        }}&nbsp;/&nbsp;
                        <span>{{ timeMinutes(currentMusic.time) }}</span>
                    </div>
                    <div class="progress-bar-warp">
                        <div class="progress-bar">
                            <div class="bar-inner" ref="progress">
                                <div
                                    class="progress-btn"
                                    ref="progressBtn"
                                    @mousedown.prevent="
                                        progressMouseDown($event)
                                    "
                                ></div>
                            </div>
                        </div>
                    </div>
                    <audio
                        :src="currentMusic.url"
                        autoplay
                        ref="audioComponent"
                    ></audio>
                </div>
                <playMode>
                    <template #suiji>
                        <img src="../../assets/images/随机白色.png" alt="" />
                    </template>
                    <template #danqu>
                        <img
                            src="../../assets/images/单曲循环白色.png"
                            alt=""
                        />
                    </template>
                    <template #xunhuan>
                        <img
                            src="../../assets/images/列表循环白色.png"
                            alt=""
                        />
                    </template>
                </playMode>
                <div class="musicVoice">
                    <div class="img-box">
                        <template v-if="value3">
                            <img
                                src="../../assets/images/声音白色.png"
                                @click="value3 = 0"
                            />
                        </template>
                        <template v-else>
                            <img
                                src="../../assets/images/静音.png"
                                @click="value3 = 100"
                            />
                        </template>
                    </div>
                    <div class="controlVoice">
                        <el-slider
                            v-model="value3"
                            :show-tooltip="false"
                            @change="changeVoice()"
                        ></el-slider>
                    </div>
                </div>
            </div>
        </div>
        <template>
            <transition
                name="custom-classes-transition"
                enter-active-class="animated bounceIn"
                leave-active-class="animated bounceOut"
            >
                <video
                    src="../../assets/video/Live_Wallpaper_3.mp4"
                    id="bgBanner"
                    autoplay
                    loop
                    muted
                    v-if="theme == 1"
                ></video>
            </transition>
            <transition
                name="custom-classes-transition"
                enter-active-class="animated bounceIn"
                leave-active-class="animated bounceOut"
            >
                <video
                    src="../../assets/video/Live_山林.mp4"
                    id="bgBanner"
                    autoplay
                    loop
                    muted
                    v-if="theme == 2"
                ></video>
            </transition>
            <transition
                name="custom-classes-transition"
                enter-active-class="animated bounceIn"
                leave-active-class="animated bounceOut"
            >
                <video
                    src="../../assets/video/Live_Wallpaper_2.mp4"
                    id="bgBanner"
                    autoplay
                    loop
                    muted
                    v-if="theme == 3"
                ></video>
            </transition>
            <transition
                name="custom-classes-transition"
                enter-active-class="animated bounceIn"
                leave-active-class="animated bounceOut"
            >
                <video
                    src="../../assets/video/Live_流星.mp4"
                    id="bgBanner"
                    autoplay
                    loop
                    muted
                    v-if="theme == 4"
                ></video>
            </transition>
            <transition
                name="custom-classes-transition"
                enter-active-class="animated bounceIn"
                leave-active-class="animated bounceOut"
            >
                <video
                    src="../../assets/video/Live_湖中樱花.mp4"
                    id="bgBanner"
                    autoplay
                    loop
                    muted
                    v-if="theme == 5"
                ></video>
            </transition>
        </template>

        <!-- <div id="mubu"></div> -->
    </div>
</template>

<script>
import "../../utils/animate/animate.min.css";
import searchModel from "../../components/searchInput/searchModel";
import playMode from "../../components/playMusicModel/PlayMode";
import headUserInfo from "../../components/userInfoOrLogin/HeadUserInfo";
import {
    lazyload,
    debounce,
    formatTime,
    timeMinutes,
} from "../../utils/common";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "playMusicModel"
);
export default {
    components: {
        headUserInfo,
        searchModel,
        playMode,
    },
    data() {
        return {
            playMusic: true,
            audio: {},
            value3: 100,
            timer: 0,
            show: true,
            //主题 默认为1 就是泳池派对 2是山林湖草 3是林间小屋 4是流星
            theme: 1,
            //控制主题模态框的显示
            themeBoxShow: false,
            //控制是默认界面还是沉侵式界面
            controlInterface: false,
            //控制列表播放按钮是否显现
            playOrDeleteShow: false,
        };
    },
    methods: {
        ...mapMutations([
            "changeCurrentTime",
            "changeTempMusicList",
            "listChangeCurrentMusic",
            "changCurrentPlayStu",
        ]),
        ...mapActions(["getSongUrl", "nextSong", "randomCycle", "randomCycle"]),
        //改变当前播放时间
        musicTime() {
            //设置定时器，如果当前播放时间超过了音乐的时长则清除掉定时器，然后切入到下一首歌
            this.timer = setInterval(() => {
                // console.log(Math.round(this.$refs.audioComponent.currentTime));
                if (
                    this.currentMusic.currentPlayTime >= this.currentMusic.time
                ) {
                    clearInterval(this.timer);
                    if (this.currentPlayMode == 1) {
                        //全部循环模式
                        this.nextSong(true);
                    } else if (this.currentPlayMode == 2) {
                        //单曲循环模式

                        this.changeCurrentTime(0);
                        this.changPlayTime(0);
                        this.playSong();
                    } else if (this.currentPlayMode == 3) {
                        this.randomCycle();
                    }
                    this.musicTime();
                } else {
                    // console.log(this.$refs.audioComponent.currentTime);
                    //实时更改当前音乐的播放时间

                    let newTime = Math.round(
                        this.$refs.audioComponent.currentTime
                    );
                    this.currentMusic.lyric.forEach((elem, index) => {
                        if (elem.time <= newTime && elem.endtime >= newTime) {
                            this.autoRoll(index);
                        }
                    });

                    let step = 710 / this.currentMusic.time;
                    //根据当前播放时间自动改变进度条
                    this._offset(step * this.$refs.audioComponent.currentTime);
                    this.changeCurrentTime(newTime);
                }
            }, 300);
        },

        //鼠标点击不动后拖动进度条事件
        progressMouseDown(e) {
            // console.log(e.pageX);
            this.touch.sliding = true;
            this.touch.startX = e.pageX; //记录第一次用户鼠标的位置

            let step = 710 / this.currentMusic.time; //换算当前播放音乐的总时间一秒等于多少像素  710是进度条总长度
            let currentTime = this.$refs.audioComponent.currentTime;
            this.touch.length = this.$refs.progress.clientWidth; //记录最开始进度条的长度
            // console.log(this.$refs.progress.clientWidth);
            document.onmousemove = (e) => {
                // console.log(e.pageX);
                let deltaX = e.pageX - this.touch.startX; //计算鼠标移动了多少像素
                let offsetWidth = this.touch.length + deltaX;
                //根据音乐播放
                let moveTime = parseInt(offsetWidth / step);
                console.log(moveTime);
                if (offsetWidth < 710) {
                    this._offset(offsetWidth);

                    this.changPlayTime(moveTime);
                }
            };
        },

        //拖动进度条后改变音乐播放时间事件
        changPlayTime(val) {
            if ("fastSeek" in this.$refs.audioComponent) {
                this.$refs.audioComponent.fastSeek(val);
            } else {
                this.$refs.audioComponent.currentTime = val;
            }
        },

        //歌词自动滚动
        autoRoll(line) {
            this.$refs.scollLine.style.transform = `translateY(-${
                line * 42
            }px)`;
        },

        //鼠标放开后清除掉绑定的拖动进入条事件
        progressMouseUp(e) {
            document.onmousemove = null;
            document.onmouseup = null;
        },
        _offset(offsetWidth) {
            this.$refs.progress.style.width = `${offsetWidth}px`;
        },
        //播放音乐
        playSong() {
            this.changCurrentPlayStu(true);
            this.$refs.audioComponent.play();
        },
        pauseMusic() {
            this.changCurrentPlayStu(false);
            this.$refs.audioComponent.pause();
        },
        //上一首下一首歌曲
        myNextSong(val) {
            if (this.currentPlayMode == 1 || this.currentPlayMode == 2) {
                this.nextSong(val);
            } else if (this.currentPlayMode == 3) {
                this.randomCycle();
            }
        },
        //改变音量
        changeVoice() {
            this.$refs.audioComponent.volume = this.value3 / 100;
        },
        myListChangeCurrentMusic(val) {
            this.getSongUrl(val.id);
            this.listChangeCurrentMusic(val);
        },
        //清理历史记录
        clearHistory() {
            localStorage.removeItem("temp_MusicList");
            this.changeTempMusicList();
        },
        //删除单条音乐记录
        deleteMusic(id) {
            let arr = JSON.stringify(
                JSON.parse(localStorage.getItem("temp_MusicList")).filter(
                    (item) => item.id != id
                )
            );
            localStorage.setItem("temp_MusicList", arr);
            this.changeTempMusicList();
        },
    },
    watch: {
        currentPlayMode(val) {
            console.log("监听了哦哦哦哦哦哦", val);
        },
        qqq: {
            handler(val) {
                console.log("监听到了哦", val);
            },
            deep: true,
        },
    },
    created() {
        this.touch = {};
        this.formatTime = formatTime;
        this.timeMinutes = timeMinutes;
    },
    mounted() {
        //进入页面的时候，根据本地存储的音乐改变播放列表
        this.changeTempMusicList();
        this.musicTime();
        this.qqq = this.$refs.audioComponent;
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    computed: {
        ...mapState(["currentMusic", "tempMusicList", "currentPlayMode"]),
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/MusicAudio/AudioPage.scss";
</style>